<template>
  <div class="indexHeader">
    <div class="leftLogo">
      <img src="../../../assets/Header/logo.png" alt />
      <p>荷福安建-管理端</p>
    </div>
    <div class="right">
      <!-- <img class="setting" src="../../../assets/Header/setting.png" alt />
      <img class="warning" src="../../../assets/Header/warning.png" alt /> -->
      <span class="exit el-icon-switch-button" @click="returnLogin"></span>
      <img class="down" src="../../../assets/Header/dowm.png" alt />
      <p class="userName">{{ username }}</p>
      <div class="picture">
        <img src="../.././../assets/findPassword/logo.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  computed: {
    username () {
      return this.$store.getters.username
    }
  },
  methods: {
    returnLogin () {
      this.$router.push('/login')
    }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
.indexHeader {
  position: relative;
  height: 64px;
  width: 100%;
  background: rgba(255, 255, 255, 1);
  .leftLogo {
    position: absolute;
    left: 0;
    top: 0;
    width: 220px;
    height: 64px;
    img {
      float: left;
      // padding-left: 16px;
      width: 32px;
      height: 32px;
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
    p {
      float: left;
      padding-left: 58px;
      font-size: 18px;
      color: #4868FF;
      line-height: 64px;
      font-weight: 600;
    }
  }
  .right {
    position: absolute;
    right: 0;
    .exit {
      color: #333;
      font-size: 16px;
      cursor: pointer;
      float: right;
      margin-right: 60px;
      margin-top: 25px;
      width: 24px;
      height: 24px;
    }
    // .setting {
    //   cursor: pointer;
    //   float: right;
    //   margin-right: 60px;
    //   margin-top: 20px;
    //   width: 24px;
    //   height: 24px;
    // }
    // .warning {
    //   cursor: pointer;
    //   float: right;
    //   margin-right: 30px;
    //   margin-top: 20px;
    //   width: 24px;
    //   height: 24px;
    // }
    .down {
      cursor: pointer;
      float: right;
      margin-right: 40px;
      margin-top: 26px;
      width: 12px;
      height: 12px;
    }
    .userName {
      float: right;
      margin-right: 10px;
      line-height: 64px;
    color:rgba(51,51,51,1);
      font-size: 16px;
      font-weight: 500;
    }
    .picture {
      float: right;
      margin-right: 20px;
      margin-top: 14px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      background-color: pink;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
